import React, { Component } from 'react'

export class button extends Component {
  constructor(props) {
    super(props)
    this.state = {
      liked:true
    } 
    console.group('%c 1-初始化阶段',"color:red",props,this.state)
  }
  handleClick=()=>{
    this.setState({
      liked:!this.state.liked
    })
  }
  UNSAFE_componentWillMount(){
    console.group('%c 2-挂载前阶段',"color:blue",this.props,this.state)
  }
  componentDidMount(){
    console.group('%c 4-挂载后阶段',"color:yellow",this.props,this.state)
  }
  shouldComponentUpdate(){
    // 数据变化时触发的生命钩子
    // 返回true或false
    // 如果返回false就不会触发3-挂载阶段更新视图,真实的开发过程中不会使用这个，除非有说明特殊业务场景
    console.group('%c 5-是否需要更新阶段',"color:pink",this.props,this.state)
    return true
  }
  UNSAFE_componentWillUpdate(){
    console.group('%c 6-将要更新阶段',"color:orange",this.props,this.state)
  }
  componentDidUpdate(){
    console.group('%c 7-更新完成阶段',"color:purple",this.props,this.state)
  }
  componentWillUnmount(){
    // 完成组件的卸载和定时器的删除
    console.group('%c 8-卸载阶段',"color:brown",this.props,this.state)
  }
  render() {
    const text = this.state.liked ? '喜欢' : '不喜欢'
    console.group('%c 3-挂载阶段',"color:green",this.props,this.state)
    return (
      <div>
        <p onClick={this.handleClick}>
          我{text}学习react
          </p>
      </div>
    )
  }
}

export default button